<template>
  <view class="follow-page">
    <view class="follow-list">
      <view
        class="follow-item"
        v-for="(item, index) in followList"
        :key="index"
      >
        <view class="user-info">
          <view class="avatar-wrapper" @click="toUser(item.avatarId)">
            <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
          </view>
          <view class="info-content">
            <view class="username">{{ item.username }}</view>
            <view class="follow-time">开始关注了你 {{ item.followTime }}</view>
          </view>
        </view>
        <view class="action-buttons">
          <!-- <button class="action-btn message" @tap="sendMessage(item)">
            <image
              class="btn-icon"
              src="@/pagesSocial/static/img/album.png"
              mode="aspectFit"
            ></image>
            <text>发私信</text>
          </button> -->
          <!-- <button
            class="action-btn follow"
            v-if="item.isFollowed == 0"
            @tap="followUser(item)"
          >
            <text>回关</text>
          </button> -->
          <text
            class="followed-t0"
            v-if="item.isFollowed == 0"
            @tap="followUser(item)"
            >关注</text
          >
          <text
            class="followed-t0"
            v-else-if="item.isFollowed == 3"
            @tap="followUser(item)"
            >回关</text
          >
          <text class="followed-t1" v-else-if="item.isFollowed == 2"
            >已关注</text
          >
          <text class="followed-t2" v-else @tap="sendMessage(item)"
            >发私信</text
          >
        </view>
      </view>
    </view>
    <nomore text="没有更多内容了" v-if="nomore"></nomore>
  </view>
</template>

<script>
var app = getApp();
export default {
  data() {
    return {
      followList: [
        // {
        //   username: "小红薯 637366",
        //   avatar:
        //     "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        //   followTime: "2024-12-08",
        //   isFollowed: 0,
        // },
        // {
        //   username: "林少建老师学生",
        //   avatar:
        //     "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        //   followTime: "2024-12-06",
        //   isFollowed: 1,
        // },
        // {
        //   username: "余老师",
        //   avatar:
        //     "https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg",
        //   followTime: "2024-11-24",
        //   isFollowed: 2,
        // },
      ],
      page: 1,
      limit: 10,
      nomore: false,
      canload: true,
    };
  },
  onReachBottom: function () {
    console.log("触底");
    if (this.canload) {
      this.page++;
      this.getlist();
    }
  },
  onLoad() {
    this.getlist();
  },
  onPullDownRefresh: function () {
    this.page = 1;
    this.followList = [];
    this.nomore = false;
    this.canload = true;
    this.getlist();
  },
  methods: {
    getlist() {
      let that = this;
      app.showLoading("加载中");
      app.get(
        "MemberNote/noteMessagelist",
        {
          type: 2,
          page: that.page,
          limit: that.limit,
        },
        function (res) {
          app.showLoading(false);
          if (res.status == 200) {
            if (res.data.length == 0) {
              that.nomore = true;
              that.canload = false;
            } else {
              var newData = res.data.map((item) => {
                return {
                  id: item.id,
                  avatarId: item.member.id,
                  username: item.member.nickname,
                  avatar: item.member.headimg,
                  followTime: item.create_time,
                  isFollowed: item.is_friend,
                  detailId: item.data_id,
                };
              });
              that.followList = that.followList.concat(newData);
            }
          }
        }
      );
    },

    sendMessage(user) {
      // 发送私信逻辑
      app.goto(
        "/pagesChat/chat/index?id=" +
          user.avatarId +
          "&type=2&name=" +
          user.username +
          "&headimg=" +
          user.avatar
      );
    },

    followUser(user) {
      // 关注用户逻辑
      console.log("关注用户:", user.username);
      let that = this;
      app.showLoading("请求中");
      app.post(
        "MemberNote/followMember",
        { follow_mid: user.avatarId },
        function (res) {
          app.showLoading(false);
          if (res.status == 200) {
            app.error("关注成功");
            let index = that.followList.findIndex(
              (item) => item.id === user.id
            );
            if (index > -1) {
              that.followList[index].isFollowed = 2;
            }
          }
        }
      );
    },

    toUser(id) {
      app.goto("/pagesEchart/find/works?mid=" + id);
    },

    toDetail(id) {
      app.goto("/pagesEchart/find/works-detail?id=" + id + "&type=0");
    },
  },
};
</script>

<style lang="scss">
.follow-page {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;

  .follow-list {
    .follow-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 30rpx;
      background-color: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;

      .user-info {
        display: flex;
        align-items: center;
        flex: 1;

        .avatar-wrapper {
          margin-right: 24rpx;

          .avatar {
            width: 90rpx;
            height: 90rpx;
            border-radius: 50%;
          }
        }

        .info-content {
          .username {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 10rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 50vw;
          }

          .follow-time {
            font-size: 26rpx;
            color: #999;
          }
        }
      }

      .action-buttons {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .action-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 0 30rpx;
          height: 60rpx;
          border-radius: 30rpx;
          font-size: 28rpx;
          background: none;

          &.message {
            border: 1rpx solid #e5e5e5;
            color: #333;
            background-color: #fff;

            .btn-icon {
              width: 28rpx;
              height: 28rpx;
              margin-right: 8rpx;
            }
          }

          &.follow {
            background-color: #e32855;
            color: #fff;
            border: none;
            padding: 0 40rpx;
            border: #e32855 2rpx solid;
            padding: 0 30rpx;
            height: 60rpx;
            border-radius: 30rpx;
            font-size: 28rpx;
          }

          &::after {
            border: none;
          }
        }

        .followed-t0 {
          font-size: 28rpx;
          color: #e32855;
          border: #e32855 2rpx solid;
          padding: 10rpx 30rpx;
          border-radius: 30rpx;
          font-size: 28rpx;
        }

        .followed-t1 {
          font-size: 28rpx;
          color: #999;
          border: #999 2rpx solid;
          padding: 10rpx 30rpx;
          border-radius: 30rpx;
          font-size: 28rpx;
        }

        .followed-t2 {
          font-size: 28rpx;
          color: #000000;
          border: #000000 2rpx solid;
          padding: 10rpx 30rpx;
          border-radius: 30rpx;
          font-size: 28rpx;
        }
      }
    }
  }
}
</style>
